<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<canvas id="1" width="1300" height="700"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById("1");
			var ctx = canvas.getContext("2d");
			var arr = new Array() //x,y,vx,vy,r
			for(var p = 1; p < 70; p++) {
				setInterval(function() {
					var r = parseInt(Math.random() * 256);
					var g = parseInt(Math.random() * 256);
					var b = parseInt(Math.random() * 256);
					var vx =Math.random() * 15;
					var vy =Math.random() * 20;
					var bj =Math.random() * 5 + 5;
					if(Math.random() > 0.5)
						vx = -vx;

					arr.push([650, 200, vx, -vy, bj, "RGB(" + r + "," + g + "," + b + ")"]);
				}, 1000);
			}
			setInterval(function() {
				ctx.fillStyle = "rgba(100,150,185,0.4)";
				ctx.fillRect(0, 0, 1300, 700);
				for(var i = 0; i < arr.length; i++) {

					ctx.fillStyle = arr[i][5];
					ctx.beginPath();
					ctx.arc(arr[i][0], arr[i][1], arr[i][4], 0, 2 * Math.PI);

					ctx.fill();
					arr[i][1] = arr[i][3] + arr[i][1];
					arr[i][3] = arr[i][3] + 0.5;
					arr[i][0] = arr[i][0] + arr[i][2];
					arr[i][4]=arr[i][4]-0.05;

					if(arr[i][1] > 700 - arr[i][4]) {
						arr[i][3] = -0.2 * arr[i][3];
						arr[i][1] = 700 - arr[i][4];
					}
					//					if(arr[i][0] > 1300 - arr[i][4] || arr[i][0] < arr[i][4])
					//						arr[i][2] = -arr[i][2];
				if(arr[i][4]<0)
				{arr[i][4]=0
				
				arr.splice(0,i);}
				
				}
				

			}, 16)
		</script>
	</body>

</html>